<template>
  <div class="user-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="card-title">应用管理</span>
          <el-button type="primary" @click="handlePopCreateAppModal">添加应用</el-button>
        </div>
      </template>
      <el-table :data="appList" style="width: 100%">
        <el-table-column prop="appId" label="appId" width="200" />
        <el-table-column prop="appSecret" label="appSecret"/>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createDate" label="创建日期" width="160" />
        <el-table-column prop="status" label="状态"  width="80">
          <template #default="scope">
            <span class="success-text" v-if="scope.row.status === AppStatus.NORMAL">正常</span>
            <!--            <span class="grey-text" v-if="scope.row.status === AppStatus.DELETED">已删除</span>-->
            <span class="error-text" v-if="scope.row.status === AppStatus.LOCKED">已锁定</span>
          </template>
        </el-table-column>
        <el-table-column prop="options" label="操作" width="100">
          <template #default="scope">
            <el-button  v-if="scope.row.status === AppStatus.NORMAL" type="danger" link @click="handleUpdateAppStatus(scope.row, AppStatus.LOCKED)">锁定</el-button>
            <el-button  v-if="scope.row.status === AppStatus.LOCKED" type="primary" link @click="handleUpdateAppStatus(scope.row, AppStatus.NORMAL)">解锁</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加应用" v-model="dialogVisible" width="420px">
      <el-form
          ref="appFormRef"
          :model="appState"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon>
        <el-form-item label="应用描述" prop="remark">
          <el-input v-model="appState.remark"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="saveAppLoading" @click="handleSaveApp">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, nextTick} from 'vue'
import api from '../../api/index.js'
import constants from "~/common/constants.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowDown} from "@element-plus/icons-vue";
import {md5} from 'js-md5'
import {uuid} from "~/common/utils.js";

const appFormRef = ref()
const AppStatus = constants.AppStatus
const dialogVisible = ref(false)
const saveAppLoading = ref(false)
const appList = ref([])
const appState = ref({
  appId: '',
  appSecret: '',
  remark: '',
  createDate: '',
  status: '',
})
const rules = {
  remark: [
    { required: true, message: '请输入应用描述信息', trigger: 'blur' },
  ],
}
const getAllAppList = () => {
  appList.value = []
  api.getAllApp().then((res) => {
    if (res.data) {
      appList.value = res.data
    }
  })
}
const handlePopCreateAppModal = () => {
  appState.value = {
    appId: '',
    appSecret: '',
    remark: '',
    createDate: '',
    status: '',
  }
  dialogVisible.value = true
  nextTick(() => {
    appFormRef.value.clearValidate()
  })
}


const handleUpdateAppStatus = (row, status) => {
  let msg = ''
  if (status === AppStatus.NORMAL) {
    msg = `确定要【解锁】应用【${row.appId}】吗?`
  } else {
    msg = `确定要【锁定】应用【${row.appId}】吗?`
  }
  ElMessageBox.confirm(
      msg,
      '提示',
      {
        'button-size': 'small',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    api.updateAppStatus({
      appId: row.appId,
      status,
    }).then((res) => {
      if (res.code === 0) {
        ElMessage.success('操作成功')
        getAllAppList()
      } else {
        ElMessage.error('操作失败')
      }
    }).catch((e) => {
      ElMessage.error('操作异常')
    })
  }).catch((e) => {})

}
const handleSaveApp = async () => {
  try {
    await appFormRef.value.validate()
    saveAppLoading.value = true
    const res = await api.createApp({
      remark: appState.value.remark,
    })
    saveAppLoading.value = false
    if (res.code === 0) {
      ElMessage.success('保存成功')
      dialogVisible.value = false
      getAllAppList()
    } else {
      ElMessage.error(res.message || '保存失败')
    }
  } catch(e){
    saveAppLoading.value = false
    ElMessage.error('保存异常')
  }
}
getAllAppList()
</script>

<style scoped lang="scss">
.opt-item{
  margin-right: 12px;
}
.dropdown-item-span{
  display: inline-block;
  width: 100%;
}
</style>
